<template>
  <div class="ContentOne">
    <!-- 头部36px -->
    <div class="header">
      <!-- 搜索框 -->
      <div>
        <el-input v-model="searchKeyword" placeholder="请输入关键字" clearable class="custom-input">
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"
            style="background-color: #21415D;border: 1px solid #19648A;"></el-button>
        </el-input>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table :data="currentPageData" border height="650">
        <el-table-column fixed prop="date" label="日期" width="200"></el-table-column>
        <el-table-column prop="name" label="姓名" width="200"></el-table-column>
        <el-table-column prop="province" label="省份" width="200"></el-table-column>
        <el-table-column prop="city" label="市区" width="200"></el-table-column>
        <el-table-column prop="address" label="地址" width="200"></el-table-column>
        <el-table-column prop="zip" label="邮编" width="200"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="big" style="color: #5DB838;font-size: 18px;"><i
                class="el-icon-tickets"></i></el-button>
            <el-button type="text" size="small" style="color: #3694FB;font-size: 18px;"
              @click="handleEdit(scope.row)"><i class="el-icon-edit"></i></el-button>
            <el-button type="text" size="small" style="color: #B04349;font-size: 18px;"><i
                class="el-icon-delete"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码-->
    <div class="footer">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
        style="color: white;"></el-pagination>
    </div>
    <!-- 添加 ccWindow 组件 -->
    <ccWindow ref="ccWindowRef"></ccWindow>
  </div>
</template>

<script>
import ccWindow from '../../../components/ccWindow/ccWindow.vue';

export default {
  name: 'MyContentComponent',
  components: {
    ccWindow
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      const startIndex = (page - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      this.currentPageData = this.filteredTableData.slice(startIndex, endIndex);
    },
    // 搜索方法
    handleSearch() {
      const keyword = this.searchKeyword.trim();
      if (keyword === '') {
        this.filteredTableData = this.tableData;
      } else {
        this.filteredTableData = this.tableData.filter((item) => {
          return (
            item.name.includes(keyword) ||
            item.province.includes(keyword) ||
            item.city.includes(keyword) ||
            item.address.includes(keyword)
          );
        });
      }
      this.total = this.filteredTableData.length;
      this.handleCurrentChange(1);
    },
    // 生成随机数
    generateRandomNumber(count) {
      return new Promise((resolve, reject) => {
        try {
          const data = [];
          for (let i = 0; i < count; i++) {
            data.push({
              date: `2016-05-${String(Math.floor(Math.random() * 31) + 1).padStart(2, '0')}`,
              name: `王小虎${Math.floor(Math.random() * 1000)}`,
              province: `上海${Math.floor(Math.random() * 100)}`,
              city: `普陀区${Math.floor(Math.random() * 100)}`,
              address: '上海市普陀区金沙路1518号',
              zip: Math.floor(100000 + Math.random() * 900000)
            });
          }
          resolve(data);
        } catch (error) {
          reject(error);
        }
      });
    },
    // 处理编辑按钮点击事件
    handleEdit(row) {
      // 调用 ccWindow 组件的 open 方法
      this.$refs.ccWindowRef.open(row);
    }
  },
  data() {
    return {
      tableData: [],
      filteredTableData: [],
      currentPageData: [],
      currentPage: 1,
      pageSize: 30,
      total: 0,
      searchKeyword: ''
    };
  },
  async created() {
    try {
      const count = 2000;
      const randomData = await this.generateRandomNumber(count);
      this.tableData = randomData;
      this.filteredTableData = this.tableData;
      this.total = this.tableData.length;
      this.handleCurrentChange(1);
    } catch (error) {
      console.error('Error generating random data:', error);
    }
  }
};
</script>

<style lang="scss" scoped>
.ContentOne {
  background-color: #172227;
  width: 100%;
  height: 900px;
  position: absolute;
  top: 6px;

  .header {
    height: 60px;

    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .custom-input {
      width: 270px;
      margin-left: 20px;
      margin-top: 10px;
    }

    .header-right {
      position: absolute;
      top: 10px;
      right: 5px;
    }
  }

  .table {
    border: 1px solid #19648A;
    color: white;
    width: 1300px;
    // height: 100vh;
    margin-left: 20px;
    margin-top: 10px;


    /* 修改滚动条样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      width: 10px;
      height: 10px;
      background-color: #172227;
    }

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #3D90C9;
      // border-radius: 4px;
    }

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
      background-color: #172227;
      box-shadow: none;
      border: none;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    ::v-deep .el-table__fixed-right-patch {
      background-color: #172227;
      border-bottom: none;
    }

    ::v-deep .el-table--border::after,
    ::v-deep .el-table--group::after {
      right: 0;
      background-color: #172227;
    }

    ::v-deep {
      .el-table {
        background-color: #172227;
        color: #fff;
        border-color: #1A597A;

        &__cell {
          height: 30px;
          padding: 0;
        }

        &__body {
          tr {
            td {
              background-color: #172227;
              border-color: #1A597A !important;
              padding: 0;

              .cell {
                height: 30px;
                line-height: 30px;
              }
            }

            &:hover {
              td {
                background-color: #1C3242;
                color: #fff;

                .is-fixed {
                  background-color: #1C3242;
                }
              }
            }
          }
        }

        &__header {
          th {
            background-color: #172227;
            color: #EFEFEF;
            border-color: #18516E !important;
            padding: 0;

            .cell {
              height: 36px;
              line-height: 36px;
            }
          }
        }
      }
    }
  }
}

::v-deep .el-input__inner {
  background-color: #172227;
  border-color: #1A597A;
  color: #fff;
}

.footer {
  margin-top: 8px;
  margin-left: 600px;
}

::v-deep .el-pagination {
  background-color: #172227;
  color: #fff;
  border-color: #1A597A;
}

/* 页码按钮样式 */
::v-deep .el-pager li {
  background-color: #172227;
  /* border: 1px solid #1A597A; */
  margin: 0 3px;
}

/* 上一页、下一页按钮样式 */
::v-deep .btn-prev {
  background-color: #172227 !important;
  color: white;
}

::v-deep .btn-next {
  background-color: #172227;
  color: white;
}

::v-deep .el-button {
  color: #676268;
  // background-color: #21415D;
  background-color: transparent;
}

::v-deep .el-input-group__append,
.el-input-group__prepend {
  background-color: #21415D;
  color: #909399;
  border: 1px solid #21415D;
}

el-table-column {
  border: 1px solid #19648A;
}


::v-deep .el-table__fixed-right::before,
.el-table__fixed::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #21415D;
  z-index: 4;
}

::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: '';
  position: absolute;
  background-color: #21415D;
  z-index: 1;
}
</style>